 <template>
	 <div class="footeBar">
		  <div class="itemBox" v-for="(item,index) in itemBoxArr" :key="index" @click="clickItme(item)">
				<img :src="item.imgN" alt="" v-if="item.path == currentPath">
				<img :src="item.imgY" alt="" v-else>	
		 </div>
	 </div>
 </template>
 <script>
 export default {
	 name:"FooterBar",
	 data(){
		 return {
			 itemBoxArr:[
				 {
					 imgY:require('../../assets/img/游戏1.png'),
					 imgN:require('../../assets/img/游戏2.png'),
					 id:0,
					 path:"/"
				 },
				 {
					 imgY:require('../../assets/img/朋友1.png'),
					 imgN:require('../../assets/img/朋友2.png'),
					 id:1,
					  path:"/friend"
				 },
				 {
					 imgY:require('../../assets/img/发现1.png'),
					 imgN:require('../../assets/img/发现2.png'),
					 id:2,
					  path:"/find"
				 },
				 {
					 imgY:require('../../assets/img/钱包1.png'),
					 imgN:require('../../assets/img/钱包2.png'),
					 id:3,
					  path:"/purse"
				 },
				 {
					 imgY:require('../../assets/img/我的1.png'),
					 imgN:require('../../assets/img/我的2.png'),
					 id:4,
					  path:"/my"
				 },
			 ],
			 currentPath:"/"
		 }
	 },
	mounted(){
		this.currentPath = this.$route.path
	},
	 methods:{
		 clickItme(item){
			 this.currentItem = item.id;
			 this.$router.push(item.path)
		 }
	 }
 }
 </script>
 <style lang="stylus" scoped>
 .footeBar {
	 width 100%;
	 height .69rem;
	 display: flex;
	 text-align center;
	 background:url('../../assets/img/tab栏底.png');
	 background-size:100% 100%;
	 .itemBox {
		 flex 1;
		 img {
			 width .24rem;
			 height .39rem;
			 margin-top .22rem;
		 }
	 }
	 .itemBox:nth-child(3){
		 img {
			 width .57rem;
			 height .65rem;
			 margin-top -.05rem;
		 }
	 }
 }
 </style>
 